<script setup>
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import { tableCheckChane } from '@/utils/index.js'

const { proxy } = getCurrentInstance()
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const tableData = ref([])
const tableColumn = reactive([
  {
    type: 'checkbox',
    width: 50,
    align: 'center',
  },
])

onMounted(() => {
  getList()
})

function getList() {

}

function handleAdd() {

}

function handleDelete() {

}
function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, '')
}

function handleExport() {
  proxy.download('', { exportIds: ids.value.join(',') }, `_${new Date().getTime()}.xlsx`)
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          type="primary"
          class="el-gradient-primary"
          @click="handleAdd"
        >
          新增
          <el-icon class="el-icon--right">
            <CirclePlusFilled />
          </el-icon>
        </el-button>
        <el-button
          type="danger"
          class="el-gradient-danger"
          :disabled="ids.length === 0"
          @click="handleDelete(null)"
        >
          删除
          <el-icon class="el-icon--right">
            <Delete />
          </el-icon>
        </el-button>
        <el-button
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
      />
    </el-card>
  </div>
</template>

<style lang="less" scoped>

</style>
